<template>

	<view class="Box">
		<view class="inputBox">
			<u--input v-model="value" border="none" placeholder="请输入线路名称" @change="change"></u--input>
		</view>
		<view class="lineTypeBox">
			<view class="text">活动类型</view>
			<view class="PinyinBox">
				<view class="rightBox">
					<u-icon color="#fff" name="checkbox-mark" size="18"></u-icon>
				</view>
				<view class="">
					自助亲朋行
				</view>
			</view>
		</view>
		<view class="imageBox">
			<view class="imageTitle">
				上传图片
			</view>
			<view class="minUpImg">
				<view v-for="(item,index) in imgList" :key="index">
					<view v-if="index   < imgList.length"
						:class="['minSl-img',(index - 3) % 4 == 0?'nothingMargin':'']">
						<image :src="imgList[index]" class="img" @click="showImage(index)">
						</image>
						<view class="icon" @click="deleteImg(index)">
							<u-icon color="#fff" name="trash" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view v-if="imgList.length < 8" class="minCameraIcon" @click="uploadImg">
					<image class="cameraIcon"
						src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/taskCameraIcon.png">
					</image>
				</view>
			</view>
		</view>
		<view class="itemDataListBox">
			<view class="scenicTitle">
				景点列表
			</view>
			<view class="listBox" v-if="itemDataList.length > 0">
				<view v-for="(item,index) in itemDataList" :key="index" class="">
					<view class="itemBox">
						<view class="itemLeft">
							<image class="itemLeftImg"
								src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/1-2-1%E6%99%AF%E7%82%B9%E8%AF%A6%E6%83%85/%E8%B7%AF%E5%BE%84%20114.png">
							</image>
							<view v-if="index < itemDataList.length - 1" class="line">
							</view>
						</view>
						<view class="itemRight">
							<view class="rightTop">
								<view class="briefBox">
									<view class="NameBox">
										<view class="name">
											{{ item.name }}
										</view>
										<image class="nameImgIcon"
											src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/scenicDeleteIcon.png"
											@click="nameImgDelete(index)"></image>
									</view>
									<view class="notice">
										{{ item.notice }}
									</view>
								</view>
								<image :src="item.imageUrl[0]" class="RightTopImg"></image>
							</view>
							<view class="taskBox">
								<view class="taskTitleBox">
									<view class="titleLeft">
										任务列表({{item.selectTask.length?item.selectTask.length:0}})
									</view>
									<view class="titleRight" @click="scenicClickShow(2,item)">
										<view class="">
											选择任务
										</view>
										<u-icon color="#2979ff" name="arrow-right" size="14"></u-icon>
									</view>
								</view>
								<view class="taskLoopList">
									<view v-for="(params,parindex) in item.selectTask" :key="parindex" class="">
										<view class="taskLoopItem">
											<view class="text">
												{{parindex + 1}}、{{ params.title }}
											</view>
											<image class="textDeleteImg"
												src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/scenicDeleteIcon.png"
												@click="taskListClick(params)"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="itemDataList.length == 0" icon="https://cdn.uviewui.com/uview/empty/news.png" mode="news"
				text="请选择景点加入行程">
			</u-empty>
		</view>
		<view class="separateBox">

		</view>
		<view class="fixedBox">
			<view class="buttonList">
				<view class="buttonBox" @click="scenicClickShow(1)">
					选择热门景点
				</view>
				<view class="buttonBox colorOne">
					选择个人景点
				</view>
				<view class="buttonBox colorTwo" @click="confirmEvent">
					确认行程
				</view>
			</view>
		</view>

		<u-popup :closeOnClickOverlay="false" :round="10" :show="scenicShow" mode="bottom">
			<!-- <scroll-view scroll-y="true" class="scenicShowBox" @scroll="handleScroll">
				<view class="titleBox">
					<view class="title">
						{{popupTitle}}
					</view>
					<image class="titleImg"
						src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/showSciclose.png"
						@click="imgClose"></image>
				</view>
				<view class="showInput">
					<u--input v-model="objData.name" border="none" clearable placeholder="输入关键字可以直接搜索"
						@blur="blurInpt"></u--input>
				</view>
				

			</scroll-view> -->
			<view class="titleBox">
				<view class="titleClone">
					<view class="title">
						{{popupTitle}}
					</view>
					<image class="titleImg"
						src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/showSciclose.png"
						@click="imgClose"></image>
				</view>

				<view class="showInput">
					<u--input v-model="objData.name" border="none" clearable placeholder="输入关键字可以直接搜索"
						@blur="blurInpt"></u--input>
				</view>
			</view>

			<scroll-view scroll-y="true" class="scenicShowBox" @scroll="handleScroll">

				<view v-if="showIndex == 1" class="scenicBox">
					<view v-for="(item,index) in showList" :key="index" class="">
						<view :class="['scenicItem',(index - 2) % 3 == 0?'noScenicItem':'']" @click="scenicEvent(item)">
							<view class="scenicImgBox">
								<image :src="item.imageUrl[0]" class="itemImg" mode="aspectFill"></image>
								<image v-if="existenceList.indexOf(item.id) == -1" class="functionImg"
									src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/falseShowSelect.png">
								</image>
								<image v-else class="functionImg"
									src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/trueShowSelect.png">
								</image>
							</view>
							<view class="name">
								{{ item.name }}
							</view>
							<view class="typeNames">
								<view v-for="(params,parindex) in item.typeNames" :key="parindex" class="">
									<view v-if="parindex < 2" class="">
										{{ params }}
										<text v-if="item.typeNames.length != 1 &&  parindex  < 1">
											/
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="showIndex == 2" class="showTaskBox">
					<view class="scenicName">
						{{ scenicName }}
					</view>
					<view class="typeListBox">
						<view v-for="(item,index) in typeList" :key="index" class="">
							<view :class="['typeItem',index == typeIndex?'typeItemTrue':'']"
								@click="typeClick(item,index)">
								{{ item.label }}
							</view>
						</view>
					</view>
					<view v-if="taskList.length > 0" class="taskListBox">
						<view class="taskLoop">
							<view v-for="(item,index) in taskList" :key="index" class="">
								<view :class="['loopItem',index + 1 == taskList.length?'loopItemTrue':'']"
									@click="taskListClick(item)">
									<view class="loopTitle">
										{{ item.title }}
									</view>
									<image v-if="existenTaskList.indexOf(item.id) == -1" class="functionImg"
										src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/falseShowSelect.png">
									</image>
									<image v-else class="functionImg"
										src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/trueShowSelect.png">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="showList.length == 0 && showIndex == 1"
					icon="http://cdn.uviewui.com/uview/empty/list.png" mode="list">
				</u-empty>
				<u-empty v-if="taskList.length == 0 && showIndex == 2"
					icon="http://cdn.uviewui.com/uview/empty/list.png" mode="list">
				</u-empty>
				<view v-if="showIndex == 1">
					<view v-if="showList.length < total">
						<u-loadmore line loadmoreText="点击加载更多" status="loadmore" @loadmore="loadmore" />
					</view>
					<view v-else>
						<u-loadmore line loadmoreText="没有更多了" status="loadmore" />
					</view>

				</view>
			</scroll-view>
		</u-popup>
	</view>

</template>

<script>
	import {
		uploadImage
	} from '@/api/upload.js'
	import {
		popular_destination,
		selectByScenic
	} from "@/api/challenge";
	import {
		loginOut
	} from '../../../api/login';

	export default {
		data() {
			return {
				popupTitle: "选择热门景点",
				value: "",
				imgList: [],
				scenicShow: false,
				objData: {
					pageNumber: 1,
					pageSize: 9,
					name: ""
				},
				showList: [],
				existenceList: [],
				itemDataList: [],
				total: 0,
				showIndex: 1,
				scenicName: '',
				typeList: [{
					label: '全部',
					value: ''
				}, {
					label: '行为类',
					value: 1
				}, {
					label: '问答类',
					value: 3
				}],
				taskList: [],
				typeIndex: 0,
				existenTaskList: [],
				existenTaskItem: [],
				scenicId: "",
				typeData: '',
				timeOut: null,
			}
		},
		created() {
			this.popularDestination()
		},

		methods: {
			handleScroll() {

				if (this.showList.length < this.total) {
					if (this.timeOut) {
						clearTimeout(this.timeOut);
					}
					this.timeOut = setTimeout(() => {
						this.objData.pageNumber += 1
						this.popularDestination()
					}, 200)
				}
			},

			confirmEvent() {
				console.log(this.value);
				// uni.navigateTo({
				// 	url: "/pages/route/establishRoute/strokeOrder"
				// });
			},
			taskListClick(item) {
				if (this.existenTaskList.indexOf(item.id) == -1) {
					this.existenTaskList.push(item.id)
					this.existenTaskItem.push(item)
				} else {
					this.existenTaskItem.splice(this.existenTaskList.indexOf(item.id), 1)
					this.existenTaskList.splice(this.existenTaskList.indexOf(item.id), 1)
				}
				// console.log('输出一下总任务', this.existenTaskItem);
				this.itemDataList.forEach(item => {
					item.selectTask = []
					this.existenTaskItem.forEach(params => {
						if (item.id == params.scenicId) {
							item.selectTask.push(params)
						}
					})
				})
			},
			typeClick(item, index) {
				this.typeIndex = index
				this.typeData = item.value
				this.selectByScenicEvent()
			},
			nameImgDelete(index) {
				this.itemDataList.splice(index, 1)
				this.existenceList.splice(index, 1)
			},
			blurInpt() {
				if (this.showIndex == 1) {
					this.objData.pageNumber = 1
					this.popularDestination()
				} else if (this.showIndex == 2) {
					this.selectByScenicEvent()
				}
			},
			loadmore() {
				this.objData.pageNumber += 1
				this.popularDestination()
			},
			scenicEvent(item) {
				if (this.existenceList.indexOf(item.id) == -1) {
					this.existenceList.push(item.id)
					item.selectTask = []
					this.itemDataList.push(item)
				} else {
					this.itemDataList.splice(this.existenceList.indexOf(item.id), 1)
					this.existenceList.splice(this.existenceList.indexOf(item.id), 1)
				}
			},
			scenicClickShow(data, item) {
				this.scenicShow = true
				this.showIndex = data
				this.objData.name = ""
				if (data == 1) {
					this.popularDestination()
					this.popupTitle = "选择热门景点"
				} else if (data == 2) {
					this.popupTitle = "选择任务"
					this.typeIndex = 0
					this.scenicId = item.id
					this.selectByScenicEvent()
					this.scenicName = item.name
				}
			},
			selectByScenicEvent() {
				selectByScenic({
					tel: uni.getStorageSync("userinfo").phone,
					scenicId: this.scenicId,
					type: this.typeData,
					name: this.objData.name,
					pageNumber: 1,
				}).then(res => {
					console.log('输出', res);
					this.taskList = res.records

				})
			},
			popularDestination() {
				var data = {}
				for (let key in this.objData) {
					if (this.objData[key] != '') {
						data[key] = this.objData[key]
					}
				}
				popular_destination(data).then(res => {
					console.log('输出', res.list);
					// this.itemDataList = res.list.slice(0, 2)
					if (this.objData.pageNumber == 1) {
						this.showList = res.list
					} else {
						res.list.forEach((item, index) => {
							this.showList.push(item)
						})
					}
					this.total = res.total
				})
			},
			imgClose() {
				this.scenicShow = false
			},
			deleteImg(data) {
				this.imgList.splice(data, 1)
			},
			uploadImg() {
				uploadImage().then(res => {
					this.imgList.push(res)
				})
			},
			showImage(data) {
				uni.previewImage({
					current: this.imgList[data],
					urls: [this.imgList[data]]
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "./establishRoute.scss"
</style>